<template>
  <div style="margin-top: 16px; margin-right: 16px">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button v-auth="Permission.ADD" v-show="!!dictId" type="primary" @click="handleCreate">
          新增
        </a-button>
        <a-button v-auth="Permission.DEL" color="error" v-show="rowSelected" @click="handleBatchDelete">
          删除
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
      </template>
    </BasicTable>
    <DictDetailModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup name="DictDetail">
import { nextTick, watch, ref } from 'vue';
import DictDetailModal from './dict-detail-modal.vue';
import { Permission, columns } from './dict-detail-option';
import { delDictDetailApi, getDictDetailPageApi } from '/@/api/sys/dict';
import { useModal } from '/@/components/Modal';
import {
  ActionItem,
  BasicTable,
  EditRecordRow,
  TableAction,
  useTable,
} from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';

const props = defineProps({
  dictId: { type: String },
});
const rowSelected = ref(false);
const [registerTable, { reload, getSelectRowKeys, getDataSource }] = useTable({
  title: '字典详细',
  titleHelpMessage: '请选中左侧的数据字典',
  rowKey: 'detailId',
  api: getDictDetailPageApi,
  columns,
  formConfig: {
    labelWidth: 80,
  },
  striped: false,
  useSearchForm: false,
  bordered: true,
  canResize: true,
  ellipsis: true,
  rowSelection: {
    type: 'checkbox',
    onChange: (selectedRowKeys) => {
      rowSelected.value = selectedRowKeys.length > 0;
    }
  },
  actionColumn: {
    width: 150,
    title: '操作',
    dataIndex: 'action',
    fixed: undefined,
  },
  beforeFetch: handleBeforeFetch,
});

const [registerModal, { openModal: openModal }] = useModal();

const { createMessage, createConfirm } = useMessage();

function handleCreate() {
  openModal(true, {
    dictId: props.dictId,
    isUpdate: false,
    records: getDataSource()
  });
}

function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    dictId: props.dictId,
    isUpdate: true,
  });
}

function handleDelete(detailIds: string[]) {
  delDictDetailApi(detailIds).then((res) => {
    createMessage.success(res.msg);
    handleSuccess();
  });
}

function handleBatchDelete() {
  createConfirm({
    iconType: 'warning',
    title: '确认提示',
    content: '请确认是否删除选中的数据字典？',
    onOk: () => {
      handleDelete(getSelectRowKeys());
    }
  });
}

function handleSuccess() {
  reload();
}

function createActions(record: EditRecordRow): ActionItem[] {
  return [
    {
      icon: 'clarity:note-edit-line',
      label: '编辑',
      auth: Permission.EDIT,
      onClick: handleEdit.bind(null, record),
    },
    {
      icon: 'ant-design:delete-outlined',
      label: '删除',
      auth: Permission.DEL,
      color: 'error',
      popConfirm: {
        title: '是否删除字典详细【' + record.label + '】？',
        confirm: handleDelete.bind(null, [record.detailId]),
      },
    },
  ];
}

// 表格请求之前，对参数进行处理
function handleBeforeFetch(params) {
  return { ...params, dictId: props.dictId };
}

watch(
  () => props.dictId,
  () => {
    nextTick(() => {
      reload();
    });
  },
);
</script>
